<template>
  <Header @get-instance="getInstanceFromTopBar"/>
  <a-row style="margin-top: 102px;">
    <a-col :span="4">
      <!--侧边导航栏-->
      <a-menu v-model:selectedKeys="currentLeve1" theme="light" mode="inline">
        <a-menu-item key="1">
          <upload-outlined />
          <span>上传</span>
        </a-menu-item>
        <a-menu-item key="2">
          <user-outlined />
          <span>稿件管理</span>
        </a-menu-item>
      </a-menu>
    </a-col>
    <a-col :span="20">
      <!--上传页面-->
      <div v-if="currentLeve1[0] === '1'">
        <a-menu v-model:selectedKeys="currentLeve2" mode="horizontal">
          <a-menu-item key="1-1" >
            <video-camera-outlined/>
            <span>投稿视频</span>
          </a-menu-item>
          <a-menu-item key="1-2">
            <FileTextFilled />
            <span>投稿文章</span>
          </a-menu-item>
        </a-menu>
        <div style="text-align: left">
          <router-view/>
        </div>
      </div>

      <!--稿件管理页面-->
      <div v-if="currentLeve1[0] === '2'">
        <a-menu v-model:selectedKeys="currentLeve2" mode="horizontal">
          <a-menu-item key="2-1">
            <video-camera-outlined/>
            <span>视频管理</span>
          </a-menu-item>
          <a-menu-item key="2-2">
            <FileTextFilled />
            <span>文章管理</span>
          </a-menu-item>
        </a-menu>
        <div style="text-align: left;margin: 15px">
          <router-view/>
        </div>
      </div>
    </a-col>
  </a-row>
</template>

<script setup>
import Header from "@/components/common/TopBar.vue";
import {FileTextFilled, UploadOutlined, UserOutlined, VideoCameraOutlined} from '@ant-design/icons-vue';
import {ref, watch} from "vue";
import router from "@/router/index.js";

const currentLeve1 = ref(['1']);
const currentLeve2 = ref(['1-1']);


watch(currentLeve1, (val) => {
  if(val[0] === '1') {
    currentLeve2.value = ['1-1'];
    router.push('/upload-manager/upload-video')
  }
  if(val[0] === '2') {
    currentLeve2.value = ['2-1'];
    router.push('/upload-manager/upload-article')
  }
});

watch(currentLeve2, (val) => {
  if(val[0] === '1-1'){
    router.push('/upload-manager/upload-video')
  }

  if(val[0] === '1-2') {
    router.push('/upload-manager/upload-article')
  }

  if(val[0] === '2-1') {
    // 视频稿件管理
    router.push('/upload-manager/manager-video')
  }

  if(val[0] === '2-2') {
    // 文章稿件管理
    router.push('/upload-manager/manager-article')
  }
});

function getInstanceFromTopBar(instance) {
  console.log("从topbar获取的实体",instance)
}
</script>

<style scoped>

</style>